<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
    /*String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";*/
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/common/common-css.v2.jsp" %>
    <style>
        #jquery-table td {
            cursor: pointer !important;
            word-break: break-all;
            word-wrap: break-word;
        }

        .load_bg {
            background: #000;
            opacity: 0.1;
            left: 0;
            top: 0;
            position: fixed;
            height: 100%;
            width: 100%;
            overflow: hidden;
            z-index: 10000;
        }

        .load_img {
            left: 50%;
            top: 180px;
            position: fixed;
            height: 50px;
            overflow: hidden;
            z-index: 20000;
        }

        .dialog-box {
            position: fixed;
            right: 200px;
            top: 200px;
            background-color: #fff;
            padding: 15px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
            z-index: 9999;
            border: 1px solid #ddd;
            display: none;
        }

        .dialog-box td {
            height: 20px;
            padding: 5px;
        }

        .btn-box {
            text-align: center;
        }

        .td-title {
            text-align: right;
        }
    </style>
</head>
<body class="no-skin">
<div class="load_bg" style="display:none;"></div>
<img src="http://img.xmiles.cn/commentloading.gif" class="load_img" style="display:none"/>
<div class="page-content">
    <form id="queryForm">
        <div class="page-content-area">
            <div class="row">
                <div class="col-sm-12">
                    <div class="widget-box" style="border:0 solid #ccc; border-top:none;border-bottom:none;">
                        <div class="widget-header widget-header-blue widget-header-flat">
                            <h4 class="widget-title">选择条件进行查询</h4>

                            <div class="widget-toolbar">
                                <a href="#" data-action="collapse">
                                    <i class="ace-icon fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main clearfix">

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" style="text-align:right"
                                           for="startDate">发放开始时间:</label>
                                    <div class="col-sm-8">
                                        <div class="input-daterange input-group">
                                            <input type="text" class="date-picker form-control"
                                                   data-date-format="yyyy-mm-dd" style="padding-left:0"
                                                   name="startDate" id="startDate" placeholder="请选择红包发放开始时间">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" style="text-align:right"
                                           for="endDate">发放结束时间:</label>
                                    <div class="col-sm-8">
                                        <div class="input-daterange input-group">
                                            <input type="text" class="date-picker form-control"
                                                   data-date-format="yyyy-mm-dd" style="padding-left:0"
                                                   name="endDate" id="endDate" placeholder="请选择红包发放结束时间">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="activityName"
                                           style="text-align:right;">活动名称:</label>
                                    <div class="col-sm-8">
                                        <s:select id="activityName" name="activityName" list="%{activityNameList}"
                                                  cssClass="form-control" headerKey="" headerValue="全选"/>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="phone"
                                           style="text-align:right;">手机号码:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="phone" id="phone">
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="billno"
                                           style="text-align:right;">交易成功商户订单号:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" name="billno" id="billno">
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="status"
                                           style="text-align:right;">红包状态:</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="status" id="status">
                                            <option value="" selected>全部</option>
                                            <option value="0">待领取</option>
                                            <option value="1">已发出</option>
                                            <option value="2">已补发</option>
                                            <option value="3">已转账</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="currentState"
                                           style="text-align:right;">红包领取同步状态:</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="currentState" id="currentState">
                                            <option value="" selected>全部</option>
                                            <option value="SENT">已发放待领取</option>
                                            <option value="FAILED">发放失败</option>
                                            <option value="RECEIVED">已领取</option>
                                            <option value="REFUND">已退款</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" for="product"
                                           style="text-align:right;">所属产品:</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="product" id="product">
                                            <option value="" selected>全部</option>
                                            <option value="0">车主无忧</option>
                                            <option value="4000">财迷之家</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" style="text-align:right"
                                           for="sendStartDate">领取开始时间:</label>
                                    <div class="col-sm-8">
                                        <div class="input-daterange input-group">
                                            <input type="text" class="date-picker form-control"
                                                   data-date-format="yyyy-mm-dd" style="padding-left:0"
                                                   name="sendStartDate" id="sendStartDate" placeholder="请选择红包领取开始时间">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-xs-12 col-sm-4">
                                    <label class="col-sm-4 control-label" style="text-align:right"
                                           for="sendEndDate">领取结束时间:</label>
                                    <div class="col-sm-8">
                                        <div class="input-daterange input-group">
                                            <input type="text" class="date-picker form-control"
                                                   data-date-format="yyyy-mm-dd" style="padding-left:0"
                                                   name="sendEndDate" id="sendEndDate" placeholder="请选择红包发放结束时间">
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 center">
                    <div class="clearfix form-actions">
                        <button class="btn btn-purple no-border" type="button" name="btn-query" onclick="query()"
                                id="btn-query">
                            <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
                            查询
                        </button>
                        &nbsp;&nbsp;&nbsp;
                        <button class="btn btn-purple no-border" type="button" onclick="exportCsv()">
                            <i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
                            导出
                        </button>
                        &nbsp;&nbsp;&nbsp;
                        <button class="btn btn-purple no-border" type="button" onclick="syncRedpack()">
                            <i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
                            同步
                        </button>
                        &nbsp;&nbsp;&nbsp;
                        <button class="btn btn-grey no-border" type="reset">
                            <i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
                            重置
                        </button>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <table id="jquery-table" class="table table-striped table-bordered table-hover">
                    </table>
                </div>
            </div>

        </div>
    </form>
</div>


<%@ include file="/common/common-js.jsp" %>
<script type="text/javascript">
    var startDom = $('#sendStartDate');
    var endDom = $('#sendEndDate');

    function syncRedpack() {
        var s = startDom.val();
        var e = endDom.val();
        if (!s || !e) {
            alert('请输入同步开始时间和结束时间(以领取时间计)');
            return;
        }

        if (!window.confirm('同步需要一定的时间, 您确定要同步 ' + s + ' ~ ' + e + ' 的微信记录?')) {
            return;
        }

        // 请求同步
        var req = {
            startDate: s,
            endDate: e
        };

        var localReq = {
            uri: '/loan_weixin/common?funid=19&shandle=0&handle=0',
            data: JSON.stringify(req)
        };

        $.post(ctx + '/weixin/forward_to_weixin.action', localReq, function (json) {
            if (json.status === 1) {
                var remoteData = getRemoteJson(json);
                if (remoteData.callStatus === 1) {
                    alert('操作成功: ' + remoteData.callMsg);
                }
                else {
                    alert('操作失败: ' + remoteData.callMsg);
                    console.log('同步远程结果 = ' + JSON.stringify(remoteData));
                }
            }
            else {
                alert('同步失败, 失败信息: ' + json.msg);
                console.log('同步结果 = ' + JSON.stringify(json));
            }
        })
    }

    function resend(billNo) {
        if (window.confirm('您确定要补发该红包?')) {
            var req = {
                billno: billNo,
                remark: '车主无忧后台补发红包'
            };

            var localReq = {
                uri: '/loan_weixin/common?funid=17&shandle=0&handle=0',
                data: JSON.stringify(req)
            };

            loadDom.fadeIn();
            $.post(ctx + '/weixin/forward_to_weixin.action', localReq, function (json) {
                if (json.status === 1) {
                    var remoteData = getRemoteJson(json);
                    if (remoteData.callStatus === 1) {
                        alert('补发成功: ' + remoteData.callMsg);
                        query();
                    }
                    else {
                        alert('补发失败: ' + remoteData.callMsg);
                        console.log('补发远程结果 = ' + JSON.stringify(remoteData));
                    }
                }
                else {
                    alert('补发失败, 失败信息: ' + json.msg);
                    console.log('补发结果 = ' + JSON.stringify(json));
                }
                loadDom.fadeOut();
            })
        }
    }

    function transfer(id) {
        if (window.confirm('您确定要转账此红包?')) {
            var req = {
                id: id
            };

            $.post('/loan_weixin/common?funid=34&handle=0&shandle=0&rd=' + Math.random(),
                    {
                        data: JSON.stringify(req)
                    },
                    function (json) {
                        if (json && json.callStatus === 1) {
                            alert('操作成功: ' + json.callMsg);
                        }
                        else {
                            json = json || {};
                            var msg = json.callMsg || '无';
                            alert('操作失败: ' + msg);
                            console.log('转账结果: ' + JSON.stringify(json));
                        }
                    },
                    'json'
            )
        }
    }

    function getRemoteJson(json) {
        if (json && json.data) {
            return eval('(' + json.data.replace(/\\/g, '') + ')');
        }
        return null;
    }

    var loadDom = $('.load_bg,.load_img');
    var jqTable = null;

    function query() {
        loadDom.show();
        if (jqTable != null) {
            jqTable.fnDraw();
        }
        else {
            loadData();
        }
    }

    function exportCsv() {
        var form = document.forms["queryForm"];
        var url0 = ctx + "/weixin/weixin_redpack_export_record.action";
        var url = encodeURI(url0);
        form.action = url;
        form.submit();
    }

    var loadData = function () {
        jqTable = $('#jquery-table').dataTable({
            "columnDefs": [
                {
                    "title": '发放时间',
                    "targets": [0],
                    "data": "createTime",
                    "class": "center",
                    "bSortable": false,
                    "width": "75px"
                },
                {
                    "title": '手机号码',
                    "targets": [1],
                    "data": "phone",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px"
                },
                {
                    "title": '金额',
                    "targets": [2],
                    "data": "money",
                    "class": "center",
                    "bSortable": false,
                    "width": "85px",
                    "render": function (data) {
                        return (data / 100).toFixed(2);
                    }
                },
                {
                    "title": '红包状态',
                    "targets": [3],
                    "data": "status",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px",
                    "render": function (data) {
                        switch (data) {
                            case 0:
                                return '待领取';
                            case 1:
                                return '已发出';
                            case 2:
                                return '已补发';
                            case 3:
                                return '已转账';
                            default:
                                return data;
                        }
                    }
                },
                {
                    "title": '活动名称',
                    "targets": [4],
                    "data": "activityName",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px"
                },
                {
                    "title": '服务类型',
                    "targets": [5],
                    "data": "serviceType",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px"
                },
                {
                    "title": '订单号',
                    "targets": [6],
                    "data": "businessId",
                    "class": "center",
                    "bSortable": false,
                    "width": "140px",
                    "render": function (d) {
                        return '<div style="width: 140px;">' + d + '</div>';
                    }
                },
                {
                    "title": '交易成功商户订单号',
                    "targets": [7],
                    "data": "successBillNo",
                    "class": "center",
                    "bSortable": false,
                    "width": "240px"
                },
                {
                    "title": '所属产品',
                    "targets": [8],
                    "data": "product",
                    "class": "center",
                    "bSortable": false,
                    "width": "100px",
                    "render": function (d) {
                        switch (d) {
                            case '0':
                                return '车主无忧';
                            case '4000':
                                return '财迷之家';
                            default:
                                return d;
                        }
                    }
                },
                {
                    "title": '用户领取时间',
                    "targets": [9],
                    "data": "sendTime",
                    "class": "center",
                    "bSortable": false,
                    "width": "75px",
                    "render": function (data) {
                        if (data) {
                            return data;
                        }
                        else {
                            return '<span style="color: #aaa">N/A<span>'
                        }
                    }
                },
                {
                    "title": '领取失败原因',
                    "targets": [10],
                    "data": "errorMsg",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px",
                    "render": function (data, i, all) {
                        if (data && all.status === 0) {
                            return data;
                        }
                        else {
                            return '<span style="color: #aaa">N/A<span>'
                        }
                    }
                },
                {
                    "title": '红包领取状态',
                    "targets": [11],
                    "data": "currentState",
                    "class": "center",
                    "bSortable": false,
                    "width": "85px",
                    "render": function (data, i, all) {
                        if (all.status === 0) {
                            return '<span style="color: #aaa">N/A<span>'
                        }
                        else {
                            if (data) {
                                switch (data) {
                                    case 'SENDING':
                                        return '发放中';
                                    case 'SENT':
                                        return '已发放, 待领取';
                                    case 'FAILED':
                                        return '发放失败';
                                    case 'RECEIVED':
                                        return '已经领取';
                                    case 'REFUND':
                                        return '已退款';
                                    default:
                                        return data;
                                }
                            }
                            else {
                                return '<span style="color: #aaa">待同步<span>'
                            }
                        }
                    }
                },
                {
                    "title": '操作',
                    "targets": [12],
                    "data": "successBillNo",
                    "class": "center",
                    "bSortable": false,
                    "width": "50px",
                    "render": function (data, i, all) {
                        var html = '';
                        // 补发按钮
                        if (data && (all.currentState === 'REFUND') && all.status === 1) {
                            html += '<button class="btn btn-purple no-border" onclick="resend(\'' + data + '\');return false;">补发</button>';
                        }
                        else {
                            html += '<button class="btn btn-grey no-border" disabled>补发</button>';
                        }
                        
                        // 转账按钮, 未发送或者已发送且退款支持转账
                        if (all.status === 0 || ((all.currentState === 'REFUND') && all.status === 1)) {
                            html += '<button class="btn btn-purple no-border" onclick="transfer(\'' + all.id + '\');return false;">转账</button>';
                        }
                        else {
                            html += '<button class="btn btn-purple no-border" disabled>转账</button>';
                        }

                        return html;
                    }
                }
            ],
            "sAjaxSource": ctx + "/weixin/weixin_redpack_get_record.action",
            "fnServerData": function (url, aoData, fnCallback) {
                var data = $('#queryForm').serializeObject();
                data.aoData = JSON.stringify(aoData);
                $.ajax({
                    "type": "POST",
                    "dataType": 'json',
                    "url": url,
                    "data": data,
                    "success": function (resp) {
                        try {
                            fnCallback(resp);
                        } catch (e) {
                            alert(e.name + ' :' + e.message)
                        }
                        //initListPage();
                    },
                    "error": function (XMLHttpRequest, textStatus) {
                        alert(textStatus);
                        loadDom.hide();
                    },
                    "complete": function () {
                        loadDom.hide();
                    }
                });
            },
            "sScrollXInner": "100%",
            "sScrollY": "100%",
            "aaSorting": [[0, "asc"]]
        });
    };

    jQuery(function ($) {
        $(".date-picker").datepicker({autoclose: true}).next().on(ace.click_event, function () {
            $(this).prev().focus();
        });
        $("#activityName").combobox();
    });
</script>
</body>
</html>